{% extends "SLBackBundle::layout.html.twig" %}

	{% block title %}{{ parent() }} - Projet - Edition : {{ projet.name|title }} {% endblock %}
	
	{% block body %}

<script type="text/javascript">
	var modif = false;

	var baselink = "{{ path('sl_back_projet_index') }}" + "/image";
	
function makeImages(names)
{
  var names = names.split(' ');
  var count = names.length;

  function constructor()
  {
	for (var i = 0; i < count; i++)
	{
		this[names[i]] = arguments[i];
	}
  }
  return constructor;
}

var Item = makeImages("id path position");

var listOfImage = [{% for image in images %} new Item({{ image.id }}, "{{ image.big.getWebPath }}", {{ image.position }}) {% if loop.last == false %} , {% endif %} {% endfor %} ];

function		getImageId(id, change)
{
	var			ret = -1;
	
	for (var i = 0; i < listOfImage.length; i++)
	{
		if ((change == "up" && listOfImage[i].position < listOfImage[id].position && (ret == -1 || listOfImage[i].position > listOfImage[ret].position)) ||
			(change == "down" && listOfImage[i].position > listOfImage[id].position && (ret == -1 || listOfImage[i].position < listOfImage[ret].position)))
			ret = i;
	}
	
	return (ret);
}

function		getContentOfList()
{
	var content = "";
	
	var pos = 1;
	for (var i = 0; i < listOfImage.length; i++)
	{
		var j;
		var select = -1;
		while (select == -1 && pos < 5000)
		{
			for (j = 0; j < listOfImage.length && select == -1; j++)
			{
				if (listOfImage[j].position == pos)
					select = j;
			}
			pos++;
		}
		
		//content  += "<td><img src=\"" + listOfImage[select].path + "\" alt=\"" + listOfImage[select].alt + "\" /></td>";
		content += "<option value=\"" + select + "\" >" + listOfImage[select].id + "</option>";
	}
	
	return content;
}

function setSketch()
{
	var sketch = document.getElementById("sketch");
	var input = document.getElementById("setthumb");
	
	var liste;

	if (document.getElementById("liste").options.selectedIndex == -1)
	{
		sketch.src="{{ asset('images/') }}none.jpg";
		input.type="hidden";
		return ;
	}
	liste = document.getElementById("liste");
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	sketch.src="{{ asset('images/big') }}" + listOfImage[id].path;

	input.type="checkbox";
}

function		getImageId(id, change)
{
	var			ret = -1;
	
	for (var i = 0; i < listOfImage.length; i++)
	{
		if ((change == "up" && listOfImage[i].ligne == listOfImage[id].ligne && listOfImage[i].position < listOfImage[id].position && (ret == -1 || listOfImage[i].position > listOfImage[ret].position)) ||
			(change == "down" && listOfImage[i].ligne == listOfImage[id].ligne && listOfImage[i].position > listOfImage[id].position && (ret == -1 || listOfImage[i].position < listOfImage[ret].position)))
			ret = i;
	}
	
	return (ret);
}

function newfocus()
{
	var liste;
		
	liste = document.getElementById("liste");
	var selected = liste.options.selectedIndex;
	setSketch()
}

function up()
{
	modif = true;
	
	var list;
	var lid;

	if (document.getElementById("liste").options.selectedIndex != -1)
		liste = document.getElementById("liste");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	if (selected > 0)
	{
		var oldId = getImageId(id, "up");
		var oldPosition = listOfImage[id].position;
		listOfImage[id].position = listOfImage[oldId].position;
		listOfImage[oldId].position = oldPosition;
	
		var oldOption = new Option(liste.options[selected - 1].text, liste.options[selected - 1].value, false, false);
		liste.options[selected - 1] = new Option(liste.options[selected].text, liste.options[selected].value, false, true);
		liste.options[selected] = oldOption;
		
	}
}

function down()
{
	modif = true;
	
	var list;
	var lid;

	if (document.getElementById("liste").options.selectedIndex != -1)
		liste = document.getElementById("liste");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	if (selected < liste.options.length - 1)
	{
		var oldId = getImageId(id, "down");
		var oldPosition = listOfImage[id].position;
		listOfImage[id].position = listOfImage[oldId].position;
		listOfImage[oldId].position = oldPosition;
	
		oldOption = new Option(liste.options[selected + 1].text, liste.options[selected + 1].value, false, false);
		liste.options[selected + 1] = new Option(liste.options[selected].text, liste.options[selected].value, false, true);
		liste.options[selected] = oldOption;
		
	}
}


function add()
{
	if (modif == true && confirm("Vous allez quitter cette page sans sauvegarder les données modifiées.\nEtes vous sure ?") == false)
			return ;
	window.location = "{{ path('sl_back_projet_image_add', { 'id' : projet.id }) }}";
}

function edit()
{
	var liste;

	if (modif == true && confirm("Vous allez quitter cette page sans sauvegarder les données modifiées\nEtes vous sure ?") == false)
			return ;
	
	if (document.getElementById("liste").options.selectedIndex != -1)
		liste = document.getElementById("liste");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	
	window.location = baselink + "/edit/" + listOfImage[id].id;
}

function del()
{
	var liste;

	if (modif == true && confirm("Vous allez quitter cette page sans sauvegarder les données modifiées.\nEtes vous sure ?") == false)
			return ;
	
	if (document.getElementById("liste").options.selectedIndex != -1)
		liste = document.getElementById("liste");
	else
		return;
	
	var selected = liste.options.selectedIndex;
	var id = parseInt(liste.options[selected].value);
	
	window.location = baselink + "/delete/" + listOfImage[id].id;
}

function save()
{
	var form = document.getElementById("submite_form");
   
	for (var i = 0; i < listOfImage.length; i++)
    {
        var inputvar = document.createElement('input');
        inputvar.setAttribute('type', 'hidden');
        inputvar.setAttribute('name', listOfImage[i].id);
		inputvar.setAttribute('value', listOfImage[i].position.toString());
        form.appendChild(inputvar);
    }
    form.submit();
}

</script>

		<div class="intro">
			<p>
			Edition du projet <b>{{ projet.name|title }}</b>
			</p>
		</div>

		<div class="form">
			<form id="submite_form" name="myform" action="{{ path('sl_back_projet_edit', {'url' : projet.url}) }}" method="post" {{ form_enctype(form) }}>
				{{ form_errors(form) }}
			
				<div class="page-form">
				
				<div class="info-form">
				<h3> Informations : </h3><br />
				
						<table>
							<tr>
							<td>{{ form_label(form.name, "Nom du projet") }}</td>
							<td>{{ form_widget(form.name) }}</td>
							</tr><tr>
							<td>{{ form_label(form.lieu, "Maître d'ouvrage") }}</td>
							<td>{{ form_widget(form.maitre_ouvrage) }}</td>
							</tr><tr>
							<td>{{ form_label(form.lieu, "Lieu") }}</td>
							<td>{{ form_widget(form.lieu) }}</td>
							</tr><tr>
							<td>{{ form_label(form.date, "Date") }}</td>
							<td>{{ form_widget(form.date) }}</td>
							</tr><br /><br /><tr>
							<td></td>
							<td><img src="{{ asset('images/couverture') }}{{ projet.couverture.getWebPath }}" style="width:380px; height:250px;" /></td>
							</tr><tr>
							<td>{{ form_label(form.file, "Image de couverture") }}</td>
							<td>{{ form_widget(form.file) }}</td>
							</tr><br /><br /><tr>
							<td>{{ form_label(form.lieu, "Surface hors oeuvre") }}</td>
							<td>{{ form_widget(form.surface) }}</td>
							</tr>
							</tr><tr>
							<td>{{ form_label(form.lieu, "Mission") }}</td>
							<td>{{ form_widget(form.mission) }}</td>
							</tr>
							</tr><tr>
							<td>{{ form_label(form.lieu, "Coût des travaux") }}</td>
							<td>{{ form_widget(form.cout) }}</td>
							</tr><tr>
							<td>{{ form_label(form.recompense, "Récompense") }}</td>
							<td>{{ form_widget(form.recompense) }}</td>
							</tr>
						</table>
					<br /><br />
					
				<h3> Descriptions : </h3><br />
						<table>
							<tr>
							<td>{{ form_label(form.description_title1, "Titre du paragraphe #1") }}</td>
							<td>{{ form_widget(form.description_title1) }}</td>
							</tr><tr>
							<td>{{ form_label(form.description_1, "Paragraphe #1") }}</td>
							<td>{{ form_widget(form.description_1) }}</td>
							</tr><tr>
							<td>{{ form_label(form.description_title2, "Titre du paragraphe #2") }}</td>
							<td>{{ form_widget(form.description_title2) }}</td>
							</tr><tr>
							<td>{{ form_label(form.description_2, "Paragraphe #2") }}</td>
							<td>{{ form_widget(form.description_2) }}</td>
							</tr><tr>
							<td>{{ form_label(form.description_title3, "Titre du paragraphe #3") }}</td>
							<td>{{ form_widget(form.description_title3) }}</td>
							</tr><tr>

							<td>{{ form_label(form.description_3, "Paragraphe #3") }}</td>
							<td>{{ form_widget(form.description_3) }}</td>
							</tr>
						</table>
				<br />
				<br />
				</div>
				<h3> Images : </h3> <br />
				<div class="image-form">
				<table>
				<tr>
					<td></td>
					<td>
						<b>Images</b>
					</td>
					<td>
						<b>Aperçus</b>
					</td>
				</tr>
				<tr>
					<td>
						<input type="Button" value="^" onclick="up()" style="width:100px; height:50px;"/><br />
						<input type="Button" value="v" onclick="down()" style="width:100px; height:50px;"/><br />
						<input type="Button" value="Supprimer" onclick="del()" style="width:100px; height:50px;" /><br />
						<input type="Button" value="Ajouter" onclick="add()" style="width:100px; height:50px;"/></a><br />
					</td>
					<td>
						<select id="liste" size="20" onclick="newfocus();" style="width:300px;"> 
							<script type="text/javascript">
								document.write(getContentOfList());
							</script>
						</select>
					</td>
					<td>
						<img id="sketch" src="{{ asset('images/') }}none.jpg" alt="apercus" style="width:520px; height:340px;"/>
					</td>
				</tr>
				</table>
				</div>
				
				{#
				{% for image in form.images %}
				<div class="block-form">
					<div>
						{{ form_label(image.isThumbnail, "Image vignette") }}
						{{ form_widget(image.isThumbnail) }}
					</div>
					<div name="block-image">
						{{ form_label(image.url, "Url de l'image") }}
						{{ form_widget(image.url) }} <br />
						{{ form_label(image.alt, "Text alternatif") }}
						{{ form_widget(image.alt) }}
					</div>
					
				</div>
				{% endfor %}
				#}
				
				{{ form_rest(form) }}
				<input type="Button" value="Enregistrer" onclick="save()"/>
			</form>
		</div>
		
		<div class="outro">
			<p>
			<a href="{{ path('sl_front_projet', {'url' : projet.url}) }}"><input type="button" value="Voir ce projet" /></a><br />
			<a href="{{ path('sl_back_projet_delete', {'url' : projet.url}) }}"><input type="button" value="Supprimer ce projet" /></a><br />
			</p>
		</div>
	{% endblock %}